<!-- @format -->

<template>
    <div class="container">
        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="item in category" :key="item.id"><RouterLink>{{ item.title }}</RouterLink></el-menu-item>
        </el-menu> -->
        <ul class="nav">
            <li v-for="item in category" :key="item.path">
                <RouterLink :to="item.path" active-class="active">{{ item.title }}</RouterLink>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {category} from '@/data/category';
import {RouterLink} from 'vue-router';
// const activeIndex2 = ref('1');
</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 60px;
    width: 100%;
    // background: $navigation;
    background-color: blue;
    box-shadow: 0 2px 8px $layer-3-fill;
    // transform: translateY(-100%);
    // opacity: 0;
}
.nav {
    list-style-type: none;
}
.nav li {
    display: inline-block;
    margin-right: 10px;
}

.nav li a.active {
    color: orange;
}
</style>
